<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>远程目录树浏览器</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='layui/css/layui.css') }}">
    <style>
        .container { padding: 20px; }
        .tree-container { border: 1px solid #e6e6e6; padding: 15px; min-height: 400px; background-color: #fafafa; }
        .status-info { margin: 10px 0; padding: 10px; background-color: #f0f9ff; border-left: 4px solid #1e90ff; }
        .error-info { margin: 10px 0; padding: 10px; background-color: #fff5f5; border-left: 4px solid #f56565; color: #e53e3e; }
        .loading { text-align: center; padding: 20px; color: #666; }
        .long_input {
            width: 800px;
        }

    </style>
</head>
<body>
    <div class="container">
        <!-- 连接信息表单 -->
        <div class="layui-card">
            <div class="layui-card-header">远程主机连接</div>
            <div class="layui-card-body">
                <div class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">主机名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="hostName" placeholder="如: server1" value="云主机" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">IP地址</label>
                            <div class="layui-input-inline">
                                <input type="text" id="hostIP" placeholder="192.168.1.100" value="10.21.162.157" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">端口</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="number" id="hostPort" value="22" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="username" placeholder="root" value="root" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" style="width: 1100px;">
                            <label class="layui-form-label">初始路径</label>
                            <div class="layui-input-inline">
                                <input type="text" id="remotePath" value="/home/mm" placeholder="/home/user" class="layui-input" style="width: 900px;">
                            </div>
                        </div>
                         <div class="layui-inline">
                            <label class="layui-form-label">最大深度</label>
                            <div class="layui-input-inline">
                                <input type="number" id="maxDepth" value="3" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <button type="button" id="connectBtn" class="layui-btn">测试连接</button>
                        <button type="button" id="loadTreeBtn" class="layui-btn">加载目录树</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 状态显示 -->
        <div id="statusInfo" class="status-info" style="display: none;">
            <span id="statusText"></span>
        </div>
        <div id="errorInfo" class="error-info" style="display: none;">
            <span id="errorText"></span>
        </div>

        <!-- 目录树 -->
        <div class="layui-card">
            <div class="layui-card-header">目录结构</div>
            <div class="layui-card-body">
                <div class="tree-container">
                    <div id="loading" class="loading" style="display: none;">
                    </div>
                    <ul id="directoryTree"></ul>
                </div>
            </div>
        </div>
    </div>

    <!-- <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
    <script src="https://cdn.staticfile.org/layui/2.8.0/layui.js"></script>
     -->
    <script src="{{ url_for('static', filename='js/socket.io/socket.io.min.js') }}"></script>
    <script src="{{ url_for('static', filename='layui/layui.js') }}"></script>
    
    <script>
        const socket = io();
        let connectionId = null;
        
        layui.use(['tree', 'layer'], function(){
            const tree = layui.tree;
            const layer = layui.layer;
            
            // DOM元素
            const connectBtn = document.getElementById('connectBtn');
            const loadTreeBtn = document.getElementById('loadTreeBtn');
            const statusInfo = document.getElementById('statusInfo');
            const errorInfo = document.getElementById('errorInfo');
            const statusText = document.getElementById('statusText');
            const errorText = document.getElementById('errorText');
            const loading = document.getElementById('loading');


            // 获取配置信息
            function getConfig() {
                return {
                    name: document.getElementById('hostName').value.trim(),
                    host: document.getElementById('hostIP').value.trim(),
                    port: document.getElementById('hostPort').value,
                    username: document.getElementById('username').value.trim(),
                    password: document.getElementById('password').value,
                    remote_path: document.getElementById('remotePath').value.trim(),
                    max_depth: document.getElementById('maxDepth').value
                };
            }

            // 验证配置
            function validateConfig() {
                const config = getConfig();
                if (!config.name || !config.host || !config.username || !config.password || !config.remote_path) {
                    showError('请填写完整的服务器配置信息');
                    return false;
                }
                return true;
            }
            
            function showStatus(message) {
                statusText.textContent = message;
                statusInfo.style.display = 'block';
                errorInfo.style.display = 'none';
            }
            
            function showError(message) {
                errorText.textContent = message;
                errorInfo.style.display = 'block';
                statusInfo.style.display = 'none';
            }
            
            function hideAllInfo() {
                statusInfo.style.display = 'none';
                errorInfo.style.display = 'none';
            }

             // 加载目录树
            loadTreeBtn.addEventListener('click', function() {
                if (!validateConfig()) {
                    return;
                }
                console.log("加载目录树"+getConfig())

                loading.style.display = 'block';
                document.getElementById('directoryTree').innerHTML = '';
                showStatus('正在加载目录: '+getConfig().remote_path);


                host_key = getConfig().name + "|" + getConfig().host + ":" + getConfig().port + "|" + getConfig().username
                let config = {
                    cmd_event:"tree",
                    params:[getConfig().remote_path,getConfig().max_depth] ,
                    hosts_key: [host_key]
                }
                socket.emit('command_event', config);
            });
            
            // 连接远程主机
            connectBtn.addEventListener('click', function() {
                if (!validateConfig()) {
                    return;
                }
                showStatus('正在连接远程主机...');
                console.log("连接远程主机"+getConfig())
                // connectBtn.disabled = true;
                socket.emit('login_remote', getConfig());
            });
            

            // Socket事件监听
            socket.on('connect', function() {
                showStatus('已连接到服务器');
            });
            
            socket.on('disconnect', function() {
                showStatus('与服务器断开连接');
            });
            
            socket.on('connection_result', function(data) {
                console.log('收到连接结果:', data);
                if (data.success) {
                    showStatus(data.msg);
                } else {
                    showError(data.msg);
                }
            });
            
            socket.on('event_result', function(data) {
                // loading.style.display = 'none';
                if (data.success) {
                    if (data.cmd_event == 'tree') {
                         tree.render({
                            elem: '#directoryTree',
                            data: data.data[0].content,
                            showCheckbox: false,
                            id: 'directoryTreeId',
                            isJump: false,
                            accordion: true , // 手风琴模式

                            click: function(obj) {
                                console.log('选中:', obj.data.field);
                                document.getElementById('remotePath').value =obj.data.field;
                            }

                        });
                        // showStatus(`加载完成: ${response.path} (${response.data.length} 项)`);
                        showStatus(data.msg);
                    } 
                } else {
                    showError(data.msg);
                }
            });
        });
    </script>
</body>
</html>